<template>
	<view :style="warpCss">
		<view class="diy-text relative">
			<view class="px-[20rpx] py-[30rpx] flex items-center justify-between">
				<view @click="diyStore.toRedirect(diyComponent.link)">
					<view class="max-w-[200rpx] truncate leading-[1]" :style="{ fontSize: diyComponent.fontSize * 2 + 'rpx', color: diyComponent.textColor, fontWeight: diyComponent.fontWeight }">
						{{ diyComponent.text }}
					</view>
				</view>
			</view>
		</view>
		<view class="pb-[30rpx] px-[20rpx] flex items-center justify-between text-center">
			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toErshou()">
				<view class="relative w-[44rpx] h-[44rpx]">
					<image class="w-[44rpx] h-[44rpx]" :src="img('addon/ershou/diy/member/shop.png')" />
				</view>
				<view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">二手商城</view>
			</view>
			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toMyOrderList()">
				<view class="relative w-[44rpx] h-[44rpx]">
					<image class="w-[44rpx] h-[44rpx]" :src="img('addon/ershou/diy/member/order.png')" />
				</view>
				<view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">我的订单</view>
			</view>
			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toMyGoods()">
				<view class="relative w-[44rpx] h-[44rpx]">
					<image class="w-[44rpx] h-[44rpx]" :src="img('addon/ershou/diy/member/goods.png')" />
				</view>
				<view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">我的商品</view>
			</view>
			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toMyGoodsOrderList()">
				<view class="relative w-[44rpx] h-[44rpx]">
					<image class="w-[44rpx] h-[44rpx]" :src="img('addon/ershou/diy/member/my_goods_order.png')" />
				</view>
				<view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">商品订单</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, watch,onMounted } from 'vue';
	import useDiyStore from '@/app/stores/diy';
	import { img,redirect } from '@/utils/common';

	const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
	const diyStore = useDiyStore();
	const diyComponent = computed(() => {
		if (diyStore.mode == 'decorate') {
			return diyStore.value[props.index];
		} else {
			return props.component;
		}
	})

	onMounted(() => {
		refresh();
	});
	
	watch(
	    () => diyComponent.value,
		(newValue, oldValue) => {
            refresh();
        },{deep: true})

  const refresh = () => {
    // 装修模式
    if (diyStore.mode == 'decorate') {
    } else {
    }
  }

	const warpCss = computed(() => {
		var style = '';
	    style += 'position:relative;';
	    if(diyComponent.value.componentStartBgColor) {
	        if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
	        else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
	    }
	
	    if(diyComponent.value.componentBgUrl) {
	        style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
	        style += 'background-size: cover;background-repeat: no-repeat;';
	    }
	
		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
		return style;
	})

	const toMyOrderList = () => {
		redirect({ url: '/addon/ershou/pages/esgoods/my_order_list' })
	}
	const toErshou = () => {
    redirect({ url: '/addon/ershou/pages/esgoods/list'})
	}
  const toMyGoods = () => {
    redirect({ url: '/addon/ershou/pages/esgoods/my_goods_list'})
  }
  const toMyGoodsOrderList = () => {
    redirect({ url: '/addon/ershou/pages/esgoods/my_goods_order_list'})
  }
</script>

<style>
</style>